<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, maximum-scale = 1, minimum-scale=1" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=0">
		<title>车栈-首页</title>
		<link href="css/mui.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" language="javascript" src="js/jquery-1.8.2.min.js"></script>
		<link href="css/swiper.min.css" rel="stylesheet" type="text/css" />

		<script>
			var httpurl = "http://192.168.31.153:8080/ThunderShop/";
			(function($, doc) {
				$.init({
					statusBarBackground: '#000000'
				});

				$.plusReady(function() {
					var network = true;
					if(mui.os.plus) {
						mui.plusReady(function() {
							if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
								network = false;
							}
						});

					}
					/**
					 * 这里突然有个想法，封装一下页面跳转
					 * 2017年8月12日 10:48:54
					 */
					mui("body").on("tap", "a", function() {
						if(this.href && this.href != "#") {
							window.location.href = this.href;
						}
					})
					mui("body").on("tap", ".gopage", function() {

						var this_obj = jQuery(this);
						var url = this_obj.data("url");
						var id = this_obj.data("param");
						//  mui.toast(id);
						mui.openWindow({
							id: url,
							url: url,
							extras: {
								data_id: id,

							},
							waiting: {
								autoShow: false,
							}
						})
					});

					//初始化时获取index的数据
					getindex();

					//預約按鈕

					//					car_data.addEventListener('tap', function(event) {
					//						//$("html").animate({scrollTop: $("#data_div").top}, 1000);
					//						//mui.toast("123");
					//						mui('#index_body').scroll().scrollTo(0, 0, 100);
					//					}, false);

				});

			}(mui, document));

			function getindex() {

				var postData = {
					apiUrl: web_url + "index/index.shtml",
					datas: {

					}
				};

				app.postServer(postData,
					function(result) {

						inittop(result.topbanner);
						initscrollnews(result.scroll);
						initgoods(result.goods);
						inittypenews(result.typenews);
						initagents(result.agent);
						//顶部banner

						//	$("#slider").html(top_banner_html);

					},
					function(err) {
						if(err) {
							plus.nativeUI.toast(err);
							return;
						}
					}
				);
			}

			function inittop(data) {
				var top_banner_html = "";
				var slide_list = $("#slider_img");
				slide_list.html("");

				var div, div_start, div_end;
				var end_index = data.length - 1;

				$.each(data, function(index, item) {

					var img_url = item.image;
					if(index == 0) {
						div_end = '<div class="mui-slider-item mui-slider-item-duplicate"><a><img src="' +
							resource_url + img_url + '"></a></div>';
						$("#slider_indicator").append('<div class="mui-indicator mui-active"></div>')
					} else {
						$("#slider_indicator").append('<div class="mui-indicator"></div>')
					}
					div = '<div class="mui-slider-item"><a><img src="' + resource_url + img_url + '"></a>';
					slide_list.append(div);
					if(index == end_index) {
						div_start = '<div class="mui-slider-item mui-slider-item-duplicate"><a><img src="' +
							resource_url + img_url + '"></a></div>';
					}
				});

				slide_list.prepend(div_start);
				slide_list.append(div_end);
				var slider = mui("#slider");
				slider.slider({
					interval: 3000
				});

			}

			function initscrollnews(data) {

				var html = '';
				$.each(data, function(index, item) {
					var date = new Date(item.date);
					var curTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
					html += '<li><a>' + item.name + '</a><span>' + curTime + '</span></li>';

				});
				$("#scorll_news").html(html);

				$(".line").slideUp();
			}

			function inittypenews(data) {
				var title_html = "";
				$.each(data, function(index, item) {
					var i = index + 1;

					$("#one" + i).html(item.name);
					var html = "<dl>";
					$.each(item.news, function(index, item) {

						var date = new Date(item.date);
						var curTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

						html +=
							'<dt><a  class="gopage" data-url="news_info.html" data-param="' + item.id + '" >' + item.name + '</a></dt>' +
							'<dd>' + curTime + '</dd>';

					});
					html += '</dl>'

					$("#con_one_" + i).html(html);

				});
				//	$("#news_tab_list").html(title_html);
				//inittab();
				//console.log(title_html);

			}

			function initgoods(data) {
				var html = "";
				$.each(data, function(index, item) {
					html += '<li>' +
						'<a class="gopage" data-url="goods.html" data-param="' + item.id + '">' +
						'<div class="IMG"><img src="' + resource_url + item.images + '"></div>' +
						'<p>' + item.name + '</p>' +
						'</a>' +
						'</li>';

				});
				$("#shop_list").html(html);

			}

			function initagents(data) {
				
				var html = ""

				$.each(data, function(index, item) {
					html += '<li> <a href = "" >'+
						'<h1 style = "color:#c0750a;" >'+item.name+'</h1> '+
						'<div class = "IMG" > <img src = "'+resource_url+item.thumb+'" > </div> '+
						'</a> </li >';
						
				});
				$("#agent_list").html(html);

			}
		</script>
	</head>

	<body id="index_body">

		<!--banner开始-->
		<section class="section">

			<div id="slider" class="mui-slider">
				<div id="slider_img" class="mui-slider-group mui-slider-loop"></div>
				<div id="slider_indicator" class="mui-slider-indicator"></div>

			</div>

			<!--导航 -->
			<div class="nav">
				<ul>
					<li id="car_data">
						<a href="#data_div"><img src="images/yuyue.png" /><span>车栈预约</span></a>
					</li>
					<li>
						<a href="#"><img src="images/yanghu.png" /><span>车栈养护</span></a>
					</li>
					<li>
						<a class="gopage" data-url="shop.html"><img src="images/shangcheng.png" /><span>车栈商城</span></a>
					</li>
					<li>
						<a class="gopage" data-url="gas_list.html"><img src="images/jiayou.png" /><span>车栈加油</span></a>
					</li>
					<li>
						<a href="#"><img src="images/weizhang.png" /><span>违章查询</span></a>
					</li>
				</ul>
			</div>

			<!--车栈新闻-->
			<div class="sy_new">
				<a href="">车栈新闻</a>
				<div class="t_news">
					<ul class="line" id="scorll_news">
					</ul>
				</div>
			</div>

			<script type="text/javascript" src="js/myslideup.js"></script>
			<script type="text/javascript">
				$(function() {

				})
			</script>

			<!--养护中心-->
			<div class="yh_title">
				<a href="">养护中心</a>
				<div class="more">
					<a href="">更多></a>
				</div>
			</div>
			<div class="sy_yhzx">
				<div class="yh_gg"><img src="images/yhgg.jpg"></div>
				<div class="yh_nav l-float">
					<ul>
						<li>
							<a href="">
								<h1 style="color:#3d78ff;">保养维修</h1>
								<span>50元起</span>
								<div class="IMG"><img src="images/bywx.jpg"></div>
							</a>
						</li>
						<li>
							<a href="">
								<h1 style="color:#ff623d;">汽车美容</h1>
								<span>呵护您的爱车</span>
								<div class="IMG"><img src="images/qcmr.jpg"></div>
							</a>
						</li>
						<li>
							<a href="">
								<h1 style="color:#11ad48;">钣金喷漆</h1>
								<span>50元起</span>
								<div class="IMG"><img src="images/bjpq.jpg"></div>
							</a>
						</li>
						<li>
							<a href="">
								<h1 style="color:#9e73de;">金融保险</h1>
								<span>50元起</span>
								<div class="IMG"><img src="images/jrbx.jpg"></div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
			<!--预约服务-->
			<div class="yy_title" id="data_div" name="data_div">
				<a href="#data_div">预约服务</a>
			</div>
			<div class="sy_yyfw">
				<ul>
					<li>
						<a class="gopage" data-url="buycar.html" data-param="">
							<h2>我要买车</h2>
							<p>精准报价 专业评测</p>
						</a>
					</li>
					<li>
						<a class="gopage" data-url="sellcar.html" data-param="">
							<h2>我要卖车</h2>
							<p>价比千家 多卖20%</p>
						</a>
					</li>
					<li>
						<a class="gopage" data-url="appraiser_list.html" data-param="">
							<h2>二手评估师</h2>
							<p>精准车辆 价值评估</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="clear"></div>

			<!--轮播广告位-->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<script src="js/swiper.min.js"></script>
			<script>
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					paginationClickable: true,
					spaceBetween: 30,
					centeredSlides: true,
					autoplay: 4500,
					autoplayDisableOnInteraction: false
				});
			</script>

			<!--车商风采-->
			<div class="cs_title">
				<a href="">车商风采</a>
				<div class="more" class="gopage" data-url="agent_list.shtml">
					<a href="">更多></a>
				</div>
			</div>
			<div class="sy_csfc">
				<div class="cs_gg">
					<a href=""><img src="images/jmgg.jpg"></a>
				</div>
				<div class="cs_nav l-float">
					<ul id="agent_list">

					</ul>
				</div>
			</div>
			<div class="clear"></div>

			<!--车主服务-->
			<div class="cz_title">
				<a class="gopage" data-url="news_list.html" data-param="">车主服务</a>
				<div class="more">
					<a class="gopage" data-url="news_list.html" data-param="">更多></a>
				</div>
			</div>
			<!--tab切换-->

			<div class="tab1" id="tab1">
				<div class="menu">
					<ul id="news_tab_list">
						<li id="one1" onclick="setTab('one',1)" class="off">行业新闻</li>
						<li id="one2" onclick="setTab('one',2)">养护常识</li>
						<li id="one3" onclick="setTab('one',3)">常见问题解答</li>
					</ul>
				</div>
				<div class="menudiv">
					<div id="con_one_1">

					</div>
					<div id="con_one_2" style="display:none;">

					</div>
					<div id="con_one_3" style="display:none;">

					</div>
				</div>
			</div>

			<!--轮播广告位-->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
					<div class="swiper-slide" style="background:url(images/lbggw.jpg) no-repeat center;"></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<script src="js/swiper.min.js"></script>
			<script>
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					paginationClickable: true,
					spaceBetween: 30,
					centeredSlides: true,
					autoplay: 4500,
					autoplayDisableOnInteraction: false
				});
			</script>

			<!--积分商城-->
			<div class="jf_title">
				<a href="">积分商城</a>
				<div class="more">
					<a class="gopage" data-url="shop.html">更多></a>
				</div>
			</div>
			<div class="sy_jfsc">
				<div class="jf_gg">
					<a href=""><img src="images/jfgg.jpg"></a>
				</div>
				<div class="jf_nav l-float">
					<ul id="shop_list">

					</ul>
				</div>
			</div>
			<div class="clear"></div>

			<!--底部导航-->

		</section>

	</body>
	<script type="text/javascript" src="js/touchScroll.js"></script>
	<script type="text/javascript" src="js/touchslider.dev.js"></script>
	<script type="text/javascript" src="js/tab.js"></script>

</html>